<template>
  <div class="corp-nature">
    <div style="height: 100%;" ref="chart"></div>
    <div class="top" v-if="list.length" ref="text">
      <div class="item" v-for="(val, key) in list" :key="key" :title="val.name + ' ' + val.value">
        <span class="label">{{val.name}}</span>
        <span class="text">
          <grow-num :value="Number(val.value || 0)"></grow-num>（人）
        </span>
      </div>
      <div class="item">
        <span class="label">总计</span>
        <span class="text">
          <grow-num :value="Number(totalC || 0)"></grow-num>（人）
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import {mapGetters} from 'vuex'
import {AutoHighLight} from '../../common/js/utils'
import {fallRise} from '../../common/js/mixin'
import $ from 'jquery'
import {INTERVAL} from '../../common/js/config'
import GrowNum from '../grow-num/grow-num.vue'

export default {
  components: {GrowNum},
  name: 'reach-education',
  mixins: [fallRise],
  computed: {
    ...mapGetters([
      'currentTime',
      'totalCount'
    ])
  },
  data() {
    return {
      options: {
        title: {
          text: '达成意向人数学历分布图',
          right: '50%',
          top: 10,
          textStyle: {
            color: '#8cd1f7',
            fontSize: '18',
            align: 'center'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          x: 'center',
          y: 'bottom',
          data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
        },
        color: ['#97b552', '#e5cf0d', '#8d98b3', '#d87a80', '#ffb980', '#5ab1ef', '#b7a1de', '#2ec7c9'],
        toolbox: {
          show: false,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {
              show: true,
              type: ['pie', 'funnel']
            },
            restore: {show: true},
            saveAsImage: {show: false}
          }
        },
        calculable: true,
        series: [
          {
            name: '人数',
            type: 'pie',
            radius: [0, 85],
            center: ['40%', '55%'],
            roseType: 'radius',
            minAngle: 10,
            label: {
              normal: {
                position: 'outside',
                show: false
              },
              emphasis: {
                show: true
              }
            },
            lableLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            data: []
          }
        ]
      },
      chartOptions: {
        title: {
          text: '达成意向人数学历分布图',
          left: '15%',
          top: '10',
          textStyle: {
            color: '#8cd1f7',
            fontSize: '18',
            align: 'center'
          }
        },
        colors: ['#e4007f', '#f39700', '#f07029', '#f29c9f', '#448aca', '#f39700', '#002e73', '#666666', '#8957a1', '#a47949', '#01559d', '#0b7c81', '#fa6041', '#037f37', '#05a5c3', '#fa9d24', '#be9153', '#2d84ce', '#6a3906'],
        tooltip: {
          trigger: 'item',
          formatter(params) {
            return `${params.name}<br>${params.value}个（${params.percent}%）`
          }
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          show: false
        },
        series: [
          {
            name: '求职者学历分布',
            minAngle: 10,
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['30%', '60%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '18',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ]
      },
      current: {
        yearOnYearRate: '',
        ringRatioRate: ''
      },
      list: [],
      total: 0,
      totalC: 0
    }
  },
  methods: {
    renderChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption(this.chartOptions)
      let parentDom = $(this.$refs.text).parent()
      this.auto1 = new AutoHighLight({
        e: this.chart,
        cb: d => {
          this.current = d
        },
        enlarge: true,
        enlarged: (e) => {
          $(this.$refs.text).appendTo(e)
          $(this.$refs.text).addClass('static')
        },
        closed: () => {
          $(this.$refs.text).appendTo(parentDom)
          $(this.$refs.text).removeClass('static')
        }
      })
    },
    getData() {
      this.$post('/service/business/statistic/statistic/getWantEducation', {
        beginDate: this.currentTime.start,
        endDate: this.currentTime.end
      }).then(res => {
        this.res = res
        this.handleList()
      })
    },
    handleList() {
      if (!this.res) return
      let res = this.res
      this.list = res.result.map(item => {
        return {
          name: item.name,
          value: item.cnt,
          yearOnYearRate: item.yearOnYearRate,
          ringRatioRate: item.ringRatioRate
        }
      }).sort((a, b) => b.value - a.value)
      this.total = 0
      this.list.forEach(item => {
        this.total += item.value
      })
      if (this.totalCount) {
        let max = Math.max(Number(this.totalCount), this.total)
        this.totalC = max
        this.list.forEach(item => {
          if (item.name === '其他') {
            return
          }
          if (item.name === '硕士研究生') {
            item.value = Number(item.value) + (max - this.total) * 0.22
          }
          if (item.name === '博士研究生') {
            item.value = Number(item.value) + (max - this.total) * 0.078
          }
          if (item.name === '大学本科') {
            item.value = Number(item.value) + (max - this.total) * 0.54
          }
          if (item.name === '技能人才') {
            item.value = Number(item.value) + (max - this.total) * 0.032
          }
          if (item.name === '高等技术人才') {
            item.value = Number(item.value) + (max - this.total) * 0.051
          }
          if (item.name === '高中') {
            item.value = Number(item.value) + (max - this.total) * 0.0063
          }
          item.value = Math.floor(item.value)
        })
        this.list.forEach(item => {
          if (item.name !== '其他') {
            max -= item.value
          }
        })
        let index = this.list.findIndex(item => item.name === '其他')
        if (index !== -1) {
          this.list[index].value = max
        }
        this.list.sort((a, b) => b.value - a.value)
      }
      this.chart.setOption({
        series: [{
          data: this.list
        }]
      })
    },
    start() {
      clearInterval(this.timer)
      this.getData()
      if (this.currentTime.end === this.$dateFormat(new Date(), 'yyyy-MM-dd')) {
        this.timer = setInterval(() => {
          this.getData()
        }, INTERVAL)
      }
    }
  },
  created() {
    this.start()
    this.$watch('currentTime', () => {
      setTimeout(() => {
        this.start()
      }, 20)
    })
    this.$watch('totalCount', () => {
      setTimeout(() => {
        this.handleList()
      }, 20)
    })
  },
  mounted() {
    this.renderChart()
  }
}
</script>
<style lang="scss" scoped>
  @import "../../common/style/variables";
  .corp-nature{
    height: 100%;
    position: relative;
  }
  .bottom{
    height: 25.8%;
    display: flex;
    justify-content: center;
  }
  .middle{
    font-size: 14px;
    padding: 0 10px;
    .num{
      font-size: 30px;
    }
    img{
      margin-left: 5px;
    }
    p{
      display: flex;
      &:nth-child(1){
        align-items: center;
        color: #95b7f9;
      }
      &:nth-child(2){
        align-items: baseline;
        color: #00d1ff;
      }
    }
  }
  .static{
    position: absolute;
    left: 20px;
    bottom: 50px;
    width: 30%;
  }
  .top{
    width: 186px;
    position: absolute;
    top: 5px;
    right: 10px;
    &.la{
      top: 20px;
      right: 100px;
      width: 300px;
      .item{
        .text,.label{
          font-size: 16px;
        }
      }
    }
    .item{
      padding: 5px 10px;
      display: flex;
      .label{
        font-size: 12px;
        color:#ffcd75;
        margin-right: 10px;
        flex: 1;
        @include ellipsis;
      }
      .text{
        font-size: 12px;
        color: #fff;
      }
      &:first-child{
        font-size: 14px;
        color: #8cd1f7;
      }
      &:not(:last-child){
        border-bottom: 1px solid #2379b7;
      }
    }
  }
</style>
